<template>
  <div class="staLiveDataWrap">
    <NavBar
      :title="'实况统计'"
      :cityName="''"
      v-show="!foldinde"
     
      :text="'返回'"
      :SeveralMenus="'1'"
    ></NavBar>
    <div class="main_container" v-show="!foldinde">
      <div class="map_wrapper">
        <div class="mapContain">
          <div id="main" class="map" style="height: 100%; width: 100%"></div>
        </div>
      </div>
      <van-popup
        class="fuBiao"
        v-model="showDetail"
        position="top"
        :style="{ width: '70%', height: '50%' }"
      >
        <detail
          @geticontrue="showDetail = false"
          v-if="showDetail"
          @detailBack="showDetail = false"
          :clickLocation="clickLocation"
          :endTime="endTime"
          :startTime="startTime"
        >
        </detail>
      </van-popup>
    </div>
    <foldinde
      ref="foldinde"
      :showArea="showArea"
      @showAreas="showAreas"
      :cityName="cityName"
      @cityNames="cityNames"
      @areaNames="areaNames"
      :areaName="areaName"
      @addValue="addValue"
      @lngs="lngs"
      @lats="lats"
      v-if="foldinde"
      :lng="lng"
      :lat="lat"
      @onClickLeftclose="onClickLeftclose"
    ></foldinde>
    <van-popup
      v-model="selectTime"
      get-container="body"
      position="bottom"
      :style="{ width: '100%', height: '40%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        @cancel="selectTime = false"
        @confirm="confirmTime"
        type="date"
        title="选择年月日"
        :max-date="maxDate"
      />
    </van-popup>
  </div>
</template>
<script type="text/javascript">
import point from "@/assets/point.png";
import detail from "@/components/staLiveData/detail.vue";
import moment from "moment";
import * as echarts from "echarts";
import mapJson from "../util/shanxi.json";
import { getItem, setItem } from "../util/storage.js";
import foldinde from "@/components/staLiveData/foldine.vue";

export default {
  data() {
    return {
      timeType: "",
      foldinde: false,
      topActive: 0,
      selectTime: false,
      showComArea: false,
      endTime: "", //当前日期
      startTime: "", //一周前日期
      showArea: false,
      currentDate: new Date(),
      maxDate: new Date(),
      index: 0,
      btn: "",
      picture: {
        point: point,
      },

      lng: "",
      lat: "",

      elMarker: null,
      clickLocation: {
        city: "",
      },
      showDetail: false,
      areaName:''
    };
  },
  mounted() {
    var location = getItem("location");
    this.clickLocation.city = location[1].name;
   
    this.endTime = moment(new Date()).format("YYYY-MM-DD");
    this.startTime = moment(new Date())
      .subtract(7, "days")
      .format("YYYY-MM-DD");
    this.lng = this.$store.getters.cityLongAndLati[0];
    this.lat = this.$store.getters.cityLongAndLati[1];

    this.fn();
  },
  watch: {},
  components: {
    detail,
    foldinde,
  },
  created() {},
  methods: {
    addValue(value) {
      this.cityName = value[1].name;
    },
    showAreas(value) {
      this.showArea = value;
    },
    cityNames(val) {
      this.cityName = val;
    },
    areaNames(val) {
      this.areaName = val;
    },
    lats(val) {
      this.lat = val;
    },
    lngs(val) {
      this.lng = val;
    },
    fn() {
      let _this = this;
      echarts.init(document.getElementById("main")).dispose(); // 销毁实例
      let myChart = echarts.init(document.getElementById("main"));

      echarts.registerMap("临汾市", mapJson, {}); //
      var mapJsonlen = mapJson.features.length,
        data = mapJson.features;
      var color = [
        "#fecb9a",
        "#fefdce",
        "#fefa7d",
        "#cdccfb",
        "#cdf99d",
        "#fdcdcc",
        "#97d5d8",
        "#8fd1ea",
        "#eef824",
      ];
      var mapData = mapJson.features.map((item, index) => {
        return {
          name: item.properties.name,
          value: 1000,
          level: item.properties.level,
          cityCode: item.properties.adcode,

          itemStyle: {
            normal: {
              show: true,
              //   areaColor: color[index] || '#8fd1ea',
              areaColor: "#d8e6fb",
            },
          },
        };
      });
      let option = {
        // tooltip: {
        //   trigger: 'item',
        //   //   formatter: '{b}<br/>{c} (p / km2)',
        // },
        series: [
          {
            name: "地图",
            type: "map",
            mapType: "临汾市",
            aspectScale: 0.85, //地图长度比
            itemStyle: {
              normal: {
                show: true,
                areaColor: "#031525",
              },
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#000",
                },
              },
            },
            data: mapData,
          },
        ],
      };
      myChart.setOption(option);

      myChart.on("click", function (params) {
        _this.$nextTick(() => {
          SGMap.plugin("SGMap.GeocodingTask").then(function (res) {
            var geocodingTask = new SGMap.GeocodingTask();

            geocodingTask
              .getLocation({
                address: `${params.name}`,
                region: "山西",
                isEncode: false,
              })
              .then(function (result) {
                _this.lng = result.location[0];
                _this.lat = result.location[1];

                _this.cityName = params.name;

                const cityToArea = {
                  太原市: "小店区",
                  朔州市: "朔城区",
                  忻州市: "忻府区",
                  大同市: "新荣区",
                  吕梁市: "离石区",
                  阳泉市: "平定县",
                  晋中市: "城区",
                  长治市: "上党区",
                  临汾市: "尧都区",
                  晋城市: "城区",
                  运城市: "盐湖区",
                };

                _this.areaName = cityToArea[params.name] || "";

                _this.btn = "下一级";
                _this.foldinde = true;
              });
          });
        });
      });

      // 窗口改变 重新调用绘制地图
      window.addEventListener("resize", () => {
        if (myChart && myChart.resize) {
          myChart.resize();
        }
      });
    },
    confirmTime() {
      if (this.timeType == "start") {
        if (
          new Date(this.$util.getTime(this.currentDate, "ymd")).getTime() >
          new Date(this.endTime).getTime()
        ) {
          this.$toast("开始时间不能大于结束时间");
          return;
        }
        this.startTime = this.$util.getTime(this.currentDate, "ymd");
      } else if (this.timeType == "end") {
        if (
          new Date(this.startTime).getTime() >
          new Date(this.$util.getTime(this.currentDate, "ymd")).getTime()
        ) {
          this.$toast("结束时间不能小于开始时间");
          return;
        }
        this.endTime = this.$util.getTime(this.currentDate, "ymd");
      }
      this.selectTime = false;
    },
    selectTimeMet(type) {
      this.timeType = type;
      this.selectTime = true;
    },
    onClickLeftclose() {
      this.foldinde = false;
      this.$nextTick(() => {
        var myEvent = new Event("resize"); // 创建一个支持冒泡且不能被取消的resize事件
        window.dispatchEvent(myEvent); // 事件可以在任何元素触发
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.showArea = true;
    },
  },
};
</script>
<style type="text/css" lang="less" scoped>
/deep/ .van-nav-bar__content {
  background: #357cff;
}

.staLiveDataWrap {
  .pageCover();
  position: relative;

  background-color: #ffff;
  overflow: hidden;
  .van-icon {
    font-size: 16px;
  }

  .rightname {
    color: #fff;
  }
  .mapContain {
    position: absolute;
    left: 0;

    right: 0;
    top: 0;
    bottom: 0;
  }

  .fuBiao {
    position: absolute;
    border-radius: 3%;
    left: 60px;
    top: 150px;
    width: 100%;
    background-image: url("../assets/titleBig.png");
    background-size: 100% 100%;
    color: #000000;
  }

  .sldAccount {
    color: white;
  }

  .title {
    color: white;
  }
}

.blacks {
  position: absolute;
  top: 5px;
  left: 10px;
  font-size: 13px;
  padding: 2px;
  z-index: 9999999;
}

.main_container {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.titleArea {
  width: 357px;
  height: 164px;
  background-image: url("../assets/title.png");
  background-size: cover;
  position: relative;

  .titleCon {
    position: absolute;
    top: 6px;
    .px2rem(left, 16px);
    color: white;
    font-size: 16px;
    font-weight: bold;
  }
  .remider_text {
    position: absolute;
    top: 46px;
    .px2rem(left, 16px);
    color: white;
    font-size: 16px;
    font-weight: bold;
  }
}

.map_wrapper {
  width: 100%;
  height: 100%;
  position: absolute;

  overflow: hidden;
  /* margin-top: -70px; */

  box-sizing: border-box;
}
/deep/.van-popup {
  background-color: #f2f2f200 !important;
  background-image: url("../assets/titleBig.png");
  background-size: 100% 100%;
}
</style>
